<template>
  <div id="allmap" style="width: 950px; height: 520px"></div>
</template>

<script>
export default {
  mounted() {
    var map = new BMapGL.Map("allmap");
    var output = "从你的位置到仓库驾车需要";
    var searchComplete = function (results) {
      if (transit.getStatus() != BMAP_STATUS_SUCCESS) {
        return;
      }
      var plan = results.getPlan(0);
      output += plan.getDuration(true) + "\n"; //获取时间
      output += "总路程为:";
      output += plan.getDistance(true) + "\n"; //获取距离
    };
    var transit = new BMapGL.DrivingRoute(map, {
      renderOptions: { map: map },
      onSearchComplete: searchComplete,
      onPolylinesSet: function () {
        setTimeout(function () {
          alert(output);
        }, "100");
      },
    });
    var start = new BMapGL.Point(108.954083, 34.323146);
    var end = new BMapGL.Point(108.952094, 34.320818);
    transit.search(start, end);
    var cr = new BMapGL.CopyrightControl({
      anchor: BMAP_ANCHOR_TOP_RIGHT,
      offset: new BMapGL.Size(20, 20),
    }); //设置版权控件位置
    map.addControl(cr); //添加版权控件
    var bs = map.getBounds(); //返回地图可视区域
    cr.addCopyright({
      id: 1,
      content:
        "<img src='../../static/img/44.jpg' width='50px' height='50px'/><a href='http://localhost:8080/#/zt_Order_conduct' style='font-size:16px;color:#000'>个人订单信息</a>",
      bounds: bs,
    });
  },
};
</script>

<style scoped>
#allmap {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>